/*index.html的样式表*/
body {
	/*body图片，水平方向重复*/
	background: url(../img/bd-bg.png) repeat-x;
	/* height: 3000px; */
}

/*
clearfix的功能为：
1、解决高度塌陷问题
2、解决父子元素外边距问题
*/
.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

/*兼容IE6*/
.clearfix {
	zoom: 1;
}

/*固定元素的宽度和居中，谁用就引入*/
.w {
	width: 940px;
	margin: 0 auto;
}

.header {
	/* background-color: aqua; */
	padding-top: 37px;
	padding-bottom: 46px;
}

.logo {
	margin-left: 15px;
}

.nav {
	float: right;
	margin-top: 22px;
}

.nav li {
	float: left;
	padding: 0 10px 10px;
	/*
	IE6 不支持dotted 不过差距不大不要紧。
	或者直接截图，让这个边框成为背景图。
	*/
	border-left: 1px #d6d6d6 dotted;
}

/* 导航条中的超链接 */
.nav a {
	font: bold 14px Georgia;
	color: #666666;
	text-decoration: none;
}

.nav a:hover {
	color: #a1a1a1;
}

/*
在chrome浏览器总，最小字体大小是12px，再小就不会变了。
*/
.nav p {
	font: 11px Tahoma;
	color: #b7b7b7;
}

.banner {
	height: 356px;
	/*背景的重复以及位置设置*/
	background: url(../img/banner-bg.png) no-repeat bottom center;
	position: relative;
}

/* 导航按钮 */
.pointerDiv {
	/*
	如果开启相对定位，那么在文档流里的位置仍然占用。
	需要开启绝对定位，那么需要相对于“父元素”banner，banner需要开启相对定位
	*/
	position: absolute;
	left: 15px;
	top: 315px;
}

.pointerDiv a {
	/* a是内联元素，但是使用这个，会得到的方块中间会有空格 */
	/* display: inline-block; */

	/* 使用浮动元素，那么可以将内联元素变成块元素，同时浮动。 */
	float: left;
	width: 17px;
	height: 17px;
	margin-left: 5px;
	background: url(../img/pointer.png);
}

/*
这里表示两个选择器，公用一个背景图片。
这里的png是给a标签设置的，注意处理IE6的兼容问题。
*/
.pointerDiv .active,
.pointerDiv a:hover {
	background: url(../img/pointer-active.png);
}

.content {
	/* background-color: red; */
	background: url(../img/line.png) no-repeat bottom center;
}

.content h1 {
	text-align: center;
	font: bold 24px georgia;
	/*如果用margin，这里会有父子便捷问题*/
	padding: 10px 0 20px;
	background: url(../img/line.png) no-repeat bottom center;
	margin-bottom: 40px;
}

/**
 * 中间的三个div
 */
.content .pl,
.content .cs,
.content .uc,
.contact .sc,
.contact .co,
.contact .nu {
	float: left;
	width: 300px;
}

/**
 * 给div添加左右边距
 */
.content .cs,
.contact .co {
	margin: 0 20px;
}

.content h2 {
	font: 21px/1 georgia;
	color: #11719e;
}

.content .p1 {
	font: 12px "times new roman";
	color: #8c8c8c;
}

/*这里不设置宽和高是不会显示图片的*/
.content .imgDiv {
	width: 300px;
	height: 188px;
	background: url(../img/img-bg.png);
	margin: 15px 0 15px;
	text-align: center;
	/*注意这里设置为12px，那么height为：202-12=188*/
	padding-top: 12px;
}

/*设置第二个段落*/
.content .p2 {
	height: 95px;
	font: 13px "times new roman";
	color: #3e3e3e;
}

/*learn more 按钮的样式*/
.content .lm {
	display: block;
	width: 163px;
	height: 40px;
	/*
	这里的40px是上面的height:40px，表示“行高”，这样文字会自动出于行中间
	*/
	font: 12px/40px "times new roman";
	/*text-indent表示“第一个字缩进”，1em表示缩进一个字的位置*/
	text-indent: 1em;
	background: url(../img/btn1.png) no-repeat;
	text-decoration: none;
	color: #016999;
	margin-bottom: 35px;
}

.contact {
	/* background-color: yellow;	 */
}

.contact .sc,
.contact .co,
.contact .nu {
	/* height: 500px; */
	/* background-color: yellow; */
}

/* 联系栏中的表单项 */
.contact .text {
	width: 296px;
	height: 33px;
	font: 10px verdana;
	color: #d4d4d4;
	background: url(../img/input.png) no-repeat;
	/*去除默认的边框*/
	border: none;
	/*去除所有浏览器的默认内边距*/
	padding: 0;
	margin: 0 0 16px;
	text-indent: 1em;
	/*IE6中，背景会随着内容增加而移动。这个样式单独为IE6设置，前面加“_”*/
	_background-attachment: fixed;
}

.contact .tarea {
	width: 296px;
	height: 114px;
	background: url(../img/textarea.png);
	border: none;
	/*但是IE6和IE8中会生成滚动条，要去除*/
	overflow: auto;
	/*设置文本域，不能调整大小。*/
	resize: none;
	/*去除所有浏览器的默认内边距、外边距*/
	padding: 10px 0;
	margin: 0;
	font: 10px verdana;
	text-indent: 1em;
	/*IE6中，背景会随着内容增加而移动。这个样式单独为IE6设置，前面加“_”*/
	_background-attachment: fixed;
}

.contact .btn {
	width: 163px;
	height: 32px;
	border: none;
	background: url(../img/btn2.png);
	font: 13px georgia;
	color: white;
	padding: 0;
	margin: 11px 0 23px;
	text-align: left;
	text-indent: 1em;
	
	/*设置鼠标指针的样式，鼠标移动到这上面，就变成“小手”*/
	cursor: pointer;	
}

.contact h2 {
	color: #444;
	font: 18px georgia;
	border-bottom: 1px dashed #D3D3D3;
	padding: 40px 0 9px;
	margin-bottom: 15px;
}

/*设置联系栏左侧*/
.sc .p1 {
	font: 12px/1 "times new roman";
	color: #444;
	margin-bottom: 6px;
}

.icon {
	/*两个元素之间会默认带上空格，使用font-size: 0;消除空格。这个空格的大小相当于文字*/
	font-size: 0;
}

.icon img {
	height: 55px;
}

/*
左侧第二个标题
字体在每个浏览器中的默认行高都是不同的，这里一定要这样设置“18px/1”才能统一。
*/
.sc .nl {
	font: bold 18px/1 "gill sans mt";
	color: #444;
	padding: 40px 0 10px;
}

/*左侧输入框*/
.sc .text {
	margin-bottom: 0;
}

/*设置右侧*/

.nu p {
	color: #444;
	font: 12px/1 helvetica;
	/*如果不设置这个height，那么p就没有高度，下面的图片会挤上来。*/
	height: 58px;
	border-bottom: 1px dashed #D3D3D3;
}

.nu .p1 {
	padding-bottom: 7px;
}

.nu .p2,
.nu .p3 {
	padding: 15px 0 8px;
}

.nu img {
	/*设置文字向左浮动*/
	float: left;
	margin-right: 10px;
}

/*
这里为什么要这样设置呢？
为了兼容IE6。不兼容IE7，因为IE7的市场份额比IE6更加少。
*/
.nu .btn{
	_margin-left: -1em;
}

/*设置底部*/
.footer {
	height: 163px;
	background: #333;
	/*设置上边框*/
	border-top: 10px solid #4c4c4c;
	padding-top: 18px;
}

.footer p {
	font: 11px "times new roman";
	color: #999;
	padding-bottom: 10px;
	margin: 0 5px;
}

.footer a{
	color: #999;
	text-decoration: none;
}

.footer .p1 {
	float: right;
	/*
	处理IE6的双倍边距bug
	H:\尚硅谷前端学科全套教程\1.前端学科--基础阶段\尚硅谷HTML+CSS教程\视频\视频6
	《101.尚硅谷_HTML&CSS基础_页面练习-修改bug》
	*/
	display: inline;
}
